<template>
	<div class="page-container">
		<el-form :model="ruleForm" inline>
		  <el-form-item label="规格名" >
			<el-input v-model="ruleForm.ruleName" placeholder="规格名"></el-input>
		  </el-form-item>
		  <el-form-item >
			<el-button type="primary">搜索</el-button>
			<el-button >重置</el-button>
		  </el-form-item>
		</el-form>
		<el-row>
			<el-col :span="24">
				<el-button type="primary" @click="handleOpen">新增</el-button>
				<el-button type="danger">批量删除</el-button>
			</el-col>
		</el-row>
		<el-table :data="tableData">
		  <el-table-column label="ID" prop="id"></el-table-column>
		  <el-table-column label="规格名称" prop="ruleName"></el-table-column>
		  <el-table-column label="商品规格" prop="rule">
			<template #default="scope">
				<span v-for="(item, index) in JSON.parse(scope.row.ruleValue)" :key="index" style="margin-right: 5px;" v-text="item.value" />
			</template>
          </el-table-column>
		  <el-table-column label="商品属性" prop="ruleAttr">
			<template #default="scope">
				<div v-for="(item, index) in JSON.parse(scope.row.ruleValue)" :key="index" v-text="item.detail.join(',')" />
			</template>
		  </el-table-column>

		  <el-table-column fixed="right" label="操作" width="120">
				<template #default="scope">
					<el-button link type="primary" size="small" @click="handleOpen(scope.row)" >修改</el-button>
					<el-button link type="primary" size="small" @click="deleteRule(scope.row.id)">删除</el-button>
				</template>
		   </el-table-column>
		</el-table>
		<el-pagination size="small" v-model:page="ruleForm.pageNum"
		v-model:limit="ruleForm.pageSize"
		 layout="prev, pager, next" :total="total"
		 :current-page="currPageCount" @current-change="handleCurrentChange"/>

		<el-dialog
			v-model="dialogVisible"
			title="编辑用户"
			width="60%"
			:before-close="handleClose"
		>
		<rule v-if="dialogVisible" @updateValue="updateValue"></rule>
			<template #footer>
			<span class="dialog-footer">
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="submitRule">
				提交
				</el-button>
			</span>
			</template>
		</el-dialog>


	</div>
</template>

<script setup lang="ts" name="makeTableDemo">
import { defineAsyncComponent, reactive, ref, onMounted } from 'vue';
import { ElMessageBox ,ElMessage  } from 'element-plus';
import {rulePageList, addOrUpdateRule,deleteRuleById} from '@/api/goods/goodsRule'
import rule from '../goods/component/rule.vue'


// 定义变量内容
const passwordFormData = ref({
	id:null,
	newPassWord:null
})
const dialogVisible = ref(false)
const dialogUpdateVisible = ref(false)
const userFormDataRef=ref(null)
const total=ref(0)
const currPageCount=ref(0)
const ruleValue = ref([] as any[])
const isShow = ref(true)
const ruleForm = ref({
	ruleName:null,
	ruleValue:null,
    pageSize:10,
    pageNum:1
});

const userFormData = ref({
  id:null,
  ruleName:null,
  ruleValue:[]
})

const tableData = ref([])



function updateValue(val:any){
	userFormData.value = val.value
	console.log(userFormData)
}

function submitRule(){
	console.log(userFormData.value)
	addOrUpdateRule(userFormData.value).then((resp:any)=>{
		ElMessage({ message: '提交成功', type: 'success', })
		handleClose()
		ruleList()
	}
	)
}

//删除tag
function handleTagClose(tag:any,item:any){
	alert(1)
	item.detail = item.detail.filter(obj => obj !== tag)
	//将字符串转成json对象，JSON.stringify将对象转换成字符串
	JSON.parse(JSON.stringify(item))

}
//保存属性值
function saveDetail(item : any){
	item.detail.push(item.addDetail)
	item.addFlag = false
}

//打开添加属性值文本框
function addDetail(item : any){
	item.addFlag = true
}

//点击确定时将填写的数据替换到rulevalue数组中
function setItemRule(index :any,item:any){
	item.editFlag = false
	item.detail=[item.detail]
	ruleValue.value.splice(index,1,item)
	isShow.value=true
}

//添加规格值
function addRuleValue(){
    ruleValue.value.push({ value:null, detail:[], editFlag:true})
    isShow.value=false
}

//item--当前要处理的对象  index--当前处理的对象是在数组中的哪个位置（下标）
function addRule(item:any,index:any){
	item.editFlag = false
	item.detail = [item.detail]
	ruleValue.value.splice(index,1,item)
}

function handleOpenPass(row:any){
	dialogUpdateVisible.value = true
	passwordFormData.value.id = row.id
}

//关闭修改密码窗口
function handleUpdateClose(){
	dialogUpdateVisible.value = false
}
function deleteRule(id:Number){
	ElMessageBox.confirm(
		'确认要删除吗?',
		'提示',
		{
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
		}
	)
    .then(() => {
		deleteRuleById(id).then((resp:any)=>{
		ElMessage({ message: '删除成功', type: 'success', })
		ruleList()
		})
    })

}




function resertFrom(){
	Object.assign(userFormData, {
		id:null,
		ruleName:null,
		ruleValue:null
	});
}
//打开弹出框
function handleOpen(val:any){
	dialogVisible.value = true
	resertFrom()
	if(val){
		Object.assign(userFormData, val);
	}
}
//关闭弹出框
function handleClose(){
	dialogVisible.value = false
}

function ruleList(){
	rulePageList(ruleForm.value).then((resp:any)=>{
		tableData.value = resp.data.records

		console.log(tableData)
		total.value = resp.data.total
		currPageCount.value = resp.data.current
	})
}

//点击分页
function handleCurrentChange(val: any) {
      console.log(`当前页: ${val}`);
	  userForm.pageNum = val
	  ruleList()
}
// 页面加载时
onMounted(() => {
	ruleList()
});

</script>

<style scoped lang="scss">
.page-container {
    height: 100%;
	background-color: #fff;
    padding: 10px 10px;
    display: flex;
    flex-direction: column;
    .pageContent {
        height: calc(100% - 140px);
        flex: 1;
    }
}
</style>
